<template>
  <div class="insurance">
    <div class="insurance_top">
      <div class="title">{{ time }}人员保险情况占比图</div>
      <pieChart id="underWarrantyRate" ref="underWarrantyRate" height="40%" width="100%"></pieChart>
      <pieChart id="dangerRate" ref="dangerRate" height="40%" width="100%"></pieChart>
    </div>
    <div class="insurance_bottom">
      <tableBox :data="tableData" :show-serial-number="false" :showThead="true" :thead-list="tableThead"
        @toInsurance="toInsurance">
      </tableBox>
    </div>
  </div>
</template>
<script>
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"
import {
  getStaffInsuranceRate,
  getStaffInsuranceTable
} from "@/api/bi/HRAndContract";
export default {
  components: { tableBox, pieChart },
  data() {
    return {
      tableThead: ['区域', '项目', '在岗人数', '在保人数', '未保人数', '在保率', '已报案', '已出险', '已结案', '出险率'],
      tableData: [],
      time: null,
      load: null
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getChartData()
    this.getTableData()
    let date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
  },
  methods: {
    async getChartData() {
      const { data: res } = await getStaffInsuranceRate();
      let data1 = [{ value: res.insuranceRate, name: '在保人数' },
      { value: res.unInsuranceRate, name: '未在保人数' }]
      let data2 = [{ value: res.dangerRate, name: '已出险' },
      { value: res.unDangerRate, name: '未出险' }]
      let legend = {
        // orient: 'vertical',
        // right: 20,
        // top: 'center',
        bottom: 5
      }

      let title1 = [
        {
          // 第一个圆环标题
          text: "在保占比", // 主标题
          textStyle: {
            color: "#000",
            fontSize: 18,
          },
          left: "49.5%", // 定位到适合的位置
          top: "47%", // 定位到适合的位置
          textAlign: "center", // 主、副标题水平居中显示
        },
      ]

      let title2 = [
        {
          // 第一个圆环标题
          text: "出险占比", // 主标题
          textStyle: {
            color: "#000",
            fontSize: 18,
          },
          left: "49.5%", // 定位到适合的位置
          top: "47%", // 定位到适合的位置
          textAlign: "center", // 主、副标题水平居中显示
        },
      ]

      this.$refs.underWarrantyRate.initChart(data1, legend, title1)
      this.$refs.dangerRate.initChart(data2, legend, title2)


    },
    async getTableData() {
      const { data: res } = await getStaffInsuranceTable();
      let data = []
      res.forEach(item => {
        data.push([
          { val: item.projectRegion },
          { val: item.projectName, click: 'toInsurance', key: item.projectId, style: "cursor: pointer;color:#409EFF" },
          { val: item.postNumber },
          { val: item.insuranceNumber },
          { val: item.unInsuranceNumber },
          { val: item.insuranceRate ? item.insuranceRate.toFixed(2) + '%' : '0.00%' },
          { val: item.reportNumber },
          { val: item.dangerNumber },
          { val: item.closeNumber },
          { val: item.unDangerRate ? item.unDangerRate.toFixed(2) + '%' : '0.00%' }
        ])
      });

      this.tableData = data
      this.load.close();
    },
    toInsurance(key) {
      this.$router.push("/cloudManage/personnel/insurance");
    }
  }
}
</script>
<style lang="scss" scoped>
.insurance {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;


  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .insurance_top {
    width: 32%;
    // height: 35vh;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;

    .title {
      width: 100%;
    }
  }

  .insurance_bottom {
    height: 86vh;
    width: 66%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;

    >div:nth-child(2) {
      flex-grow: 1;
    }
  }
}
</style>